<template>
  <div class="yjls">
    <div class="yjls2">
      <h4 style="border-bottom: 1px solid #bbb; height: 60px; line-height: 60px">押金变更明细</h4>
      <div class="foot">
        <div class="foot-head">
            <el-form class="h-form" ref="form" :model="form">
            <el-form-item label="订单时间" style="display: flex">
                <el-col :span="11">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="form.date1"
                    style="width: 100%"
                  ></el-date-picker>
                </el-col>
                <el-col class="line" :span="2" style="text-align: center"
                  >-</el-col
                >
                <el-col :span="11">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="form.date2"
                    style="width: 100%"
                  ></el-date-picker>
                </el-col>
              </el-form-item>
            </el-form>
            <el-button type="primary" style="width: 120px; height: 40px;margin:0 0 0 20px">搜索</el-button>
        </div>

         <el-table
            :data="tableData"
            style="width: 100%"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column prop="time" label="操作时间" sortable width="360">
             
            </el-table-column>
            <el-table-column prop="danjia" label="变更前"  width="180">
            </el-table-column>
            <el-table-column prop="date" label="变更后"  width="180">
            </el-table-column>
            <el-table-column prop="address" label="操作人" >
            </el-table-column>

          </el-table>
      </div>
       <el-pagination background layout="prev, pager, next" :total="100" style="height:40px;margin:30px 0 30px 0;float:right">
        </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
       tableData: [
        {
          date: "03",
          address: "10",
          danjia: 239,
          time:"2021-xx-xx xx:xx:xx"
        },
        {
          date: "02",
          address: "10",
          danjia: 239,
          time:"2020-xx-xx xx:xx:xx"
        },
       {
          date: "02",
          address: "10",
          danjia: 239,
          time:"2020-xx-xx xx:xx:xx"
        },
        
      ],
        }
    }
};
</script>

<style lang="scss" scoped>
.yjls {
  width: 98%;
  overflow: hidden;
  margin: 1%;
  background-color: #fff;
  .yjls2{
      padding: 0 4%;
      .foot{
          width: 100%;
         overflow: hidden;
        .foot-head{
            width: 50%;
            height: 100px;
            display: flex;
        }
      }
  }
}
</style>